import React, { useEffect, useMemo, useRef, useState } from 'react';
import qs from 'query-string';
import { Col, Row } from 'antd';
import AdjustModel from './AdjustModel';
import { useLocation } from 'react-router-dom';

const SeatGroupAdjust: React.FC = () => {
  // 路由location
  const location = useLocation();
  const ref1 = useRef();
  const ref2 = useRef();
  const [currentGroupId, setCurrentGroupId] = useState<any>();
  // URL查询字符串=>对象
  const query = useMemo(() => {
    return qs.parse(location.search);
  }, [location.search]);
  // 数据初始化 & 监听页码变化更新数据
  useEffect(() => {
    const id = query.seatGroupId;
    if (!id) {
      return;
    }
    setCurrentGroupId(id);
  }, [query.seatGroupId]);
  return (
    <>
      <Row gutter={16}>
        <Col span={12}>
          <AdjustModel
            key="table_left"
            cRef={ref1}
            seatGroupId={currentGroupId}
            layout="left"
            callback={() => {
              // 刷新右侧
              console.log('刷新右侧');
              //通过current调用暴露的方法
              (ref2.current as any).freshTable();
            }}
          ></AdjustModel>
        </Col>
        <Col span={12}>
          <AdjustModel
            key="table_right"
            cRef={ref2}
            seatGroupId={currentGroupId}
            layout="right"
            callback={() => {
              // 刷新左侧
              console.log('刷新左侧');
              //通过current调用暴露的方法
              (ref1.current as any).freshTable();
            }}
          ></AdjustModel>
        </Col>
      </Row>
    </>
  );
};

export default SeatGroupAdjust;
